import React, { Component } from 'react'
import { NavBar} from 'antd-mobile';
import './category.scss'
import SearchInput from "../searchInput/SearchInput"
import myaxios from "../../utils/myaxios"

export default class Category extends Component {
  state = {
    cartList:[],//商品分类信息
  }
  componentDidMount(){
    myaxios.get("/categories").then(res=>{
      console.log(res);
      this.setState({
        cartList:res,
      })
    })
  }
  render() {
    return (
      <div className="yg-category">
        {/* 分类导航条开始 */}
        <div className="yg-category-nav">
          <NavBar className="category-nav-title">商品分类</NavBar>
        </div>
        {/* 分类导航条结束 */}
        {/* 分类搜索框开始 */}
        <div className="yg-category-search">
          <SearchInput></SearchInput>
        </div>
        {/* 分类搜索框结束 */}
        {/* 分类菜单栏开始 */}
        <div className="yg-category-menu">
          <ul className="category-menu-left">
            {
              this.state.cartList.map((v,i)=>{
                if(v.cat_pid === 0){
                return <li key={v.cat_id}>{v.cat_name}</li>
                }
              })
            }
          </ul>
          <div className="category-menu-right">
            {
              
            }
          </div>
        </div>
        {/* 分类菜单栏结束 */}
      </div>
    )
  }
}
